<template>
  <view>
    <view class="search">
      <view style="display: flex;align-items: center;">
        <uni-icons type="search"
          size="20"></uni-icons>
        <input class="uni-input"
          v-model="userName"
          placeholder="请输入要搜索的用户名"
          @input="searchInput"
          @confirm="searchInput" />
      </view>

      <view v-if="showClearIcon"
        @click="clearIcon">
        <uni-icons type="closeempty"
          size="20"></uni-icons>
      </view>

    </view>
    <view class="listContent"
      v-for="(item,index) in listData">
      <view class="listItem">
        <view style="display: flex;align-items: center;">
          <image :src='httpUrl+"/app/file/viewFile?fileId="+item.avatar'
            style="width: 8vw;height: 8vw;margin-right: 2vw;"></image>
          <text class="textItem">{{item.userName}}</text>
        </view>
		<view style="display: flex;align-items: center;">
		  <view @tap="chooseFollow(item.userId,index)" v-if="item.interrelationFlag=='YES'" class="follow">互相关注</view>
		  <view @tap="doSaveFollow(item.userId,index)" v-if="item.interrelationFlag=='NO'" class="follow">回关</view>
		  <!-- <image src="@/static/img/gengduo.png"
		    style="width: 8vw;height: 8vw;"></image> -->
		</view>
      <!--  <image src="@/static/img/gengduo.png"
          style="width: 8vw;height: 8vw;"></image> -->
      </view>
    </view>	

  </view>
</template>

<script setup lang="ts">
  import { onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'
 import {getUserFollowUsers,cancelFollow,saveFollow} from '@/utils/api/userinfo.ts'
  const httpUrl=getApp().globalData.baseUrl
  const userName = ref('')
  const showClearIcon = ref(false)
  const searchInput = () => {
    if (userName.value) {
      showClearIcon.value = true
    } else {
      showClearIcon.value = false
    }
	initFollowList()
  }

  const clearIcon = () => {
    showClearIcon.value = false
    userName.value = ""
	initFollowList()
  }

  const listData = ref([
   
  ])
  
  
  function initFollowList(){
  	  getUserFollowUsers({data:{"pageSize":100,"userName":userName.value}}).then(res=>{
  		  listData.value=res.data.list
  	  })
  }
  
  
  const chooseFollow=(userId,userIndex)=>{
  	uni.showActionSheet({
  		itemList: ['取消关注'],
  		success: function (res) {
  			if(res.tapIndex==0){
  				saveFollow({data:{userId:userId}}).then(res=>{
  					listData.value[userIndex].interrelationFlag='NO'
  				})
  			}
  		}
  	});
  
  }
  

  const doSaveFollow=(userId,userIndex)=>{
  	  saveFollow({data:{userId:userId}}).then(res=>{
  	  	listData.value[userIndex].interrelationFlag='YES'
  	  })
  	
  }
  
  
  initFollowList()
</script>

<style lang="scss"
  scoped>
  .search {
    margin: 0 auto;
    padding: 21rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 678rpx;
    height: 74rpx;
    background: #F5F5F5;
    border-radius: 37rpx 37rpx 37rpx 37rpx;
    opacity: 0.9;
    margin-bottom: 2vh;
  }

  .listContent {
    padding: 0.5vw 5vw;
  }

  .listItem {
    padding: 1vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
  }
</style>